<template>
  <div>
    <headerNav />
    <div class="mincard">
      <div class="mindWidth fontSize">
        <span @click="$router.push('/enterprise?id=' + companyId)">荣誉</span> >
        <span @click="$router.push(`/policyPage?id=${companyId}&title=${title}`)">{{ title }}</span> >
        <span>详情</span>
      </div>
    </div>

    <div class="company-box" v-if="list.length && list.length>0">
      <div class="mindWidth">
        <div class="flex list-title">
          <div class="lable-title">序号</div>
          <div class="lable-title">企业名称</div>
        </div>
        <div class="list-content">
          <div class="list-item flex" v-for="(item,index) in list" :key="index">
            <div>{{ index + 1 }}</div>
            <div class="name" @click="toCompany(item)">{{ item.companyName }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="mindWidth">
      <div class="content_image">
        <img src="../../../static/image/noDataBox.png" alt />
        <p>暂无数据</p>
      </div>
    </div>

    <div class="mindWidth page flex items-middle flex-end">
      <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" :pageNo="pageNo" />
    </div>
    <navigation></navigation>
    <footerNav />
  </div>
</template>

<script>
import { commonRequest } from "../../api/api.js";
import paging from "../../components/paging.vue";
export default {
  name: "publicDetail",
  components: {
    paging
  },
  data() {
    return {
      companyId: this.$route.query.companyId,
      title: this.$route.query.title,
      num: this.$route.query.num,
      list: [],
      pageNo: 1
    };
  },
  mounted() {
    this.getPublicDetail();
  },
  methods: {
    accept_CurrentValue(value) {
      this.pageNo = value;
      this.getPublicDetail();
    },
    getPublicDetail() {
      let params = {
        batchNumber: this.num,
        projectName: this.title,
        pageNo: this.pageNo,
        pageSize: 10
      };
      commonRequest(
        "/api/cms/cmsHonorProject/getCompanyListOfNames",
        params
      ).then(res => {
        // console.log(res.code === 200, res, res.records);
        this.list = res.records;
        this.$refs.paging_zi.totalValue(res.total);
      });
    },
    toCompany(item) {
      window.open("/enterprise/honor?id=" + item.companyId, "_blank");
    }
  }
};
</script>

<style lang="less" scoped>
.mincard {
  height: 80px;
  .fontSize {
    font-size: 14px;
  }
}
.company-box {
  width: 100%;
  margin: 20px 0;
  min-height: 515px;
  .list-title {
    width: 100%;
    font-size: 16px;
    color: rgba(96, 98, 100, 0.63);
    font-weight: 600;
    padding: 15px 0;
    .lable-title:first-child {
      width: 20%;
      text-align: center;
    }
  }
  .list-content {
    width: 100%;
    .list-item {
      font-size: 14px;
      color: #666666;
      border-top: 1px solid #eeeeee;
      padding: 15px 0;
      background: #ffffff;
      .name {
        cursor: pointer;
      }
      div:first-child {
        width: 20%;
        text-align: center;
      }
    }
    .list-item:nth-child(even) {
      background: #f5f5f5;
    }
  }
}
.page {
  height: 80px;
}
.content_image {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  image {
    width: 300px;
  }
  p {
    color: rgb(204, 204, 204);
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>
